<template>
	<view class="content">
		<u-navbar title="建议反馈"></u-navbar>
		<view class="content_main">
			<view class="content_main_item">
				<view class="content_main_item_tit">
					意见类型
				</view>
				<view class="u-flex content_main_item_ls">
					<view class="content_main_item_ls_item"
						:class="data.current == index ? 'content_main_item_ls_item--active' :''"
						v-for="(item,index) in data.list" :key="item.id" @click="change(index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="content_main_item">
				<view class="content_main_item_tit">
					反馈内容（必填）
				</view>
				<u-input class="u-m-t-12" v-model="data.value" type="textarea" height="300" :adjust-position="false"
					:auto-height="true" :placeholder="data.placeholder" maxlength="200" />
				<view class="content_main_item_txt">
					<text>{{data.currentWordNumber}}</text>/200
				</view>
			</view>
		</view>

		<u-bottom-button confirmText="提交" @confirm="$u.throttle(confirm, 1000)"></u-bottom-button>
	</view>
</template>

<script setup>
	import {
		reactive,
		watch
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const data = reactive({
		list: [],
		current: 0,
		value: '',
		currentWordNumber: 0,
		placeholder: '请具体描述您要反馈的内容，以便我们即使处理，感谢您的支持。',
	})
	onLoad(() => {
		getClassIfy()
	})
	watch(() => data.value, (n) => {
		if (n.length >= 200) {
			data.value = data.value.substr(0, 200)
			data.currentWordNumber = 200
		} else {
			data.currentWordNumber = n.length
		}
	}, {
		deep: true
	})
	const change = (i) => {
		if (data.current == i) return
		data.current = i
	}
	const getClassIfy = async () => {
		let params = {
			type: 'feedback'
		}
		data.list = await uni.$u.api.getClassifyInfo({
			params
		})
	}
	const confirm = async () => {
		if (uni.$u.test.isEmpty(data.value)) return uni.$u.toast('请填写反馈内容')
		let params = {
			content: data.value,
			type: data.list[data.current].id
		}
		let res = await uni.$u.api.getFeedback(params)
		uni.$u.toast('感谢您的反馈，我们会尽快处理')
		setTimeout(() => {
			uni.$u.route({
				type: 'back'
			})
		}, 1000)
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.content {
		&_main {
			padding: 0 30rpx;
			margin-top: 30rpx;

			&_item {
				color: #101010;
				background-color: #fff;
				margin-bottom: 20rpx;
				padding: 30rpx;
				font-size: 26rpx;

				&_tit {
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}

				&_txt {
					font-size: 28rpx;
					text-align: right;
					padding: 20rpx;

					text {
						color: #00D075;
					}
				}

				&_ls {
					&_item {
						padding: 20rpx 30rpx;
						border: 2rpx solid #eee;
						margin-right: 20rpx;
						border-radius: 16rpx;

						&--active {
							border: 2rpx solid #EBFCF4;
							background-color: #EBFCF4;
							color: #00D075;
						}
					}
				}
			}
		}
	}
</style>